<template>
  <div style="margin-top: 60px;">
    <div class="setting-container" v-for="st in settings">
      <div class="setting-box" @click="st.option">
        <div class="title-box">
          <div class="title">{{ st.name }}</div>
          <div class="info">{{ st.info }}</div>
        </div>
        <div class="icon-box">
          <svg class="icon" aria-hidden="true">
            <use :xlink:href="st.icon"></use>
          </svg>
        </div>
      </div>
    </div>
    <div class="bottom-tips">已经到底了 :)</div>
    <Dialog
      title="修改密码"
      @close-dialog="detailDialog = false;" 
      :visible="detailDialog"
      :maskBtn="true"
      :width="300"
      :button-list="btnList"
    >
      <el-form
        ref="changeFormRef"
        class="form-box"
        :rules="rules_change"
        :model="changeForm"
        label-position="top"
        size="large"
      >
        <el-form-item label="原始密码" prop="oldPassword">
          <el-input v-model="changeForm.oldPassword" clearable />
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input v-model="changeForm.newPassword" type="password" show-password clearable />
        </el-form-item>
      </el-form>
    </Dialog>
  </div>
</template>

<script setup>
  import message from '@/utils/message';
  import Dialog from '@/components/Dialog.vue';
  import { useUserStore } from '@/stores/user';
  import { loginReq, changeUserInfo } from '@/utils/api';
  import { ref, reactive } from 'vue';

  const useUser = useUserStore();
  const settings = [
    {
      name: '清除本地缓存',
      info: '包含保存的账户信息',
      icon: '#icon-shanchu',
      option() {
        message.confirm('确认清除？', '操作', 'warning', () => {
          clearLocalStorage();
          message.success('清除成功', 1500);
        });
      }
    },
    {
      name: '修改密码',
      info: '修改该用户的登录密码',
      icon: '#icon-bianji',
      option() {
        detailDialog.value = true;
      }
    },
  ];

  function clearLocalStorage() {
    localStorage.removeItem('iaccount_keepme_bool_4a5bef');
    localStorage.removeItem('iaccount_username_7c66fa');
    localStorage.removeItem('iaccount_password_ac61be');
  }

  let detailDialog = ref(false);
  const btnList = [
    {
      type: 'default',
      name: '取消',
      btnEvent: () => {
        detailDialog.value = false;
      },
      dis: false
    },
    {
      type: 'primary',
      name: '提交',
      btnEvent: () => {
        changeFormRef.value.validate((valid) => {
          if(valid) {
            loginReq(useUser.userName, changeForm.oldPassword)
              .then(res => {
                if(res.data.msg === "成功") {
                  changeUserInfo({ uid: useUser.userID, password: changeForm.newPassword})
                    .then(res => {
                      if(res.data) {
                        message.success('修改成功');
                        detailDialog.value = false;
                      }
                    })
                    .catch(err => {
                      message.warning('修改失败，请重试');
                      console.warn(err);
                    });
                } else {
                  message.warning('原密码错误，请重试');
                }
              })
              .catch(err => {
                message.warning('原密码错误，请重试');
                console.warn(err);
              });
          }
        });
      },
      dis: false
    }
  ];
  let changeFormRef = ref();
  let changeForm = reactive({
    oldPassword: "",
    newPassword: ""
  });

  const validatePwd = (rule, value, callback) => {
    if(value === '')
      callback(new Error('密码不能为空！'));
    else if(value.length < 8)
      callback(new Error('密码需大于8位！'));
    else
      callback();
  };
  const rules_change = reactive({
    oldPassword: [{ validator: validatePwd, trigger: 'blur' }],
    newPassword: [{ validator: validatePwd, trigger: 'blur' }],
  });
</script>

<style lang="scss" scoped>
  .bottom-tips{
    width: fit-content;
    line-height: 30px;
    margin: auto;
    margin-top: 20px;
    font-size: 13px;
    color: $theme-shadow;
    user-select: none;
  }
  .setting-container{
    width: 92%;
    height: 55px;
    margin: auto;
    padding-top: 6px;
    border-bottom: 1px solid $theme-shadow0;
    cursor: pointer;
    .setting-box{
      width: 90%;
      height: 55px;
      margin: auto;
      .title-box{
        float: left;
        width: fit-content;
        .title{
          height: 30px;
          font-size: 16px;
          color: $theme-main-dark;
        }
        .info{
          height: 25px;
          font-size: 13px;
          color: $theme-shadow;
        }
      }
      .icon-box{
        float: right;
        line-height: 55px;
        width: 50px;
        text-align: end;
        font-size: 16px;
        color: $theme-main-dark;
      }
    }
  }
  .setting-container:hover{
    background-color: $theme-shadow00;
  }
</style>